<%@ page language="java" import="com.util.StringFinal" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/upload/fileinput.css" />

<!--上传图片  -->

<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/upload/fileinput.js"></script>
<script type="text/javascript" src="../../js/upload/zh.js"></script>
<script type="text/javascript" src="../../js/bootstrapValidator.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link
	href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!-- 时间控件 -->
<script src="../../js/moment-with-locales.js"></script>
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-datetimepicker.min.css" />
<script src="../../js/bootstrap-datetimepicker.min.js"></script>
<script src="../../js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="../../js/wordcontrol.js"></script>
<script type="text/javascript">
	function initSelect() {
		$.ajax({
			async : false,
			cache : false,
			type : 'get',
			dataType : "json",
			url : "../../json/nation.json",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {
				if (!data.size) {
					$("#userzj_nation").html("");
					$.each(data, function(i, n) {
						$("#userzj_nation").append(
								" <option value=\"" + n.nation_id + "\">"
										+ n.nation_name + "</option>");
					})
				}
			}
		});//AJAX结束
		$.ajax({
			async : false,
			cache : false,
			type : 'get',
			dataType : "json",
			url : "../../json/political.json",
			error : function() {
				alert('请求失败');
			},
			success : function(data) {
				if (!data.size) {
					$("#userzj_political").html("");
					$.each(data, function(i, n) {
						$("#userzj_political").append(
								" <option value=\"" + n.political_id + "\">"
										+ n.political_name + "</option>");
					})
				}
			}
		});//AJAX结束
	}
	$(function() {
		//初始化下拉框
		initSelect();
		$("#userzj_nation").val('${user.userzj_nation}');
		$("#userzj_political").val('${user.userzj_political}');
	});

	//表单验证
	$(document)
			.ready(
					function() {
						$("#userimage").attr(
								"src",
								"../../image/user/${user.userzj_picture}?tmp="
										+ Math.random());
						$("#fileimage")
								.fileinput(
										{
											language : 'zh', //设置语言
											uploadUrl : "../specialist/uploadZJImage", //上传的地址
											allowedFileExtensions : [ 'jpg',
													'gif', 'png' ],//接收的文件后缀
											showUpload : true, //是否显示上传按钮
											showCaption : true,//是否显示标题
											browseClass : "btn btn-primary", //按钮样式  
											uploadAsync : true, //默认异步上传
											//dropZoneEnabled: false,//是否显示拖拽区域
											/* minImageWidth: 100, //图片的最小宽度
											minImageHeight: 100,//图片的最小高度
											maxImageWidth: 100,//图片的最大宽度
											maxImageHeight: 100,//图片的最大高度 */
											maxFileSize : 1024,//单位为kb，如果为0表示不限制文件大小
											//minFileCount: 0,
											maxFileCount : 1, //表示允许同时上传的最大文件个数
											enctype : 'multipart/form-data',
											validateInitialCount : true,
											previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
											msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
											language : 'zh',
										});

						//导入文件上传完成之后的事件
						$("#fileimage")
								.on(
										"fileuploaded",
										function(event, data, previewId, index) {
											var result = data.response;
											if (result == 1) {
												window.location = "../infocenter/getinfocenter";
											}
										});
						$('#user_form')
								.bootstrapValidator(
										{
											message : 'This value is not valid',
											feedbackIcons : {
												valid : 'glyphicon glyphicon-ok',
												invalid : 'glyphicon glyphicon-remove',
												validating : 'glyphicon glyphicon-refresh'
											},
											fields : {
												email : {
													validators : {
														emailAddress : {
															message : 'The input is not a valid email address'
														}
													}
												}
											}
										})
					});

	$.fn.serializeObject = function() {
		var o = {};
		var a = this.serializeArray();
		$.each(a, function() {
			if (o[this.name]) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	};
	function updateUser() {
		var bootstrapValidator = $("#user_form").data('bootstrapValidator');
    	$('#registerForm').bootstrapValidator('validate');
    	if(bootstrapValidator.isValid()){
    		$("#updateBtn").attr("disabled", "true");
    		var jsonuserinfo = $('#user_form').serializeObject();
    		$.ajax({
    			type : 'POST',
    			url : '../specialist/updateUserZJ',
    			data : jsonuserinfo,
    			success : function(result) {
    				if (result == 1) {
    					$("#updateBtn").removeAttr("disabled");
    					alert("修改成功");
    				} else {
    					$("#updateBtn").removeAttr("disabled");
    					alert("修改失败");
    				}
    			}
    		});
    	}
	}
	function pwdupdate() {
		$("#refresh").load(
				'../infocenter/pwdupdate.jsp?userid=' + $("#userzj_id").val());
	}
</script>
</head>
<body>
	<h4 class="heading">专家信息</h4>
	<div class="myline"></div>
	<form class="form-horizontal" style="padding-top: 20px" id="user_form">
		<div class="row">
			<div class="col-md-9">
				<div class="form-group">
					<label class="col-md-3 control-label">用户名:</label>
					<div class="col-md-9">
						<input type="text"
							style="border: none; background-color: #F5FFFA;"
							readonly="readonly" class="form-control"
							value="${user.userzj_id}" id="userzj_id" name="userzj_id">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">姓名:</label>
					<div class="col-md-9">
						<input type="text" class="form-control"
							value="${user.userzj_name}" id="userzj_name" name="userzj_name">
					</div>
				</div>
			</div>
			<div class="col-md-3" id="up-img-touch">
				<div style="margin-left: 20px;">
					<c:choose>
						<c:when test="${empty user.userzj_picture}">
							<img class="img-thumbnail" src="../../image/user/default.jpg"
								style="width: 90px; height: 120px">
						</c:when>
						<c:otherwise>
							<img class="img-thumbnail"
								src="../../image/user/${user.userzj_picture}" id="userimage"
								style="width: 90px; height: 120px">
						</c:otherwise>
					</c:choose>
				</div>
				<a href="" data-toggle="modal" data-target="#mymodal"> <span
					class="text-primary" style="font-weight: bold">修改头像</span>
				</a> <a onclick="pwdupdate()"> <span class="text-primary"
					style="padding-left: 15px; font-weight: bold">修改密码</span>
				</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-9">
				<div class="form-group">
					<div class="col-md-12">
						<label class="col-md-3 control-label">性别:</label>
						<div class="col-md-9">
							<label class="radio-inline"> <input type="radio"
								name="userzj_sex" id="male" value="男" checked> 男
							</label> <label class="radio-inline"> <input type="radio"
								name="userzj_sex" id="female" value="女"> 女
							</label>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">生日:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_birth" name="userzj_birth"
							class="form-control" value="${user.userzj_birth}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">QQ:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_qq" name="userzj_qq"
							class="form-control" placeholder="QQ" value="${user.userzj_qq}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">邮箱:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_email" name="userzj_email"
							class="form-control" placeholder="Email"
							value="${user.userzj_email}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">籍贯:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_origin" name="userzj_origin"
							class="form-control" value="${user.userzj_origin}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">民族:</label>
					<div class="col-md-3">
						<select class="combobox" id="userzj_nation" name="userzj_nation"
							style="height: 30px; width: 100%; float: left">

						</select>
					</div>
					<label class="col-md-3 control-label">政治面貌:</label>
					<div class="col-md-3">
						<select class="combobox" id="userzj_political"
							name="userzj_political"
							style="height: 30px; width: 100%; float: left">

						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">职称:</label>
					<div class="col-md-3">
						<input type="text" id="userzj_profession" name="userzj_profession"
							class="form-control" value="${user.userzj_profession}">
					</div>
					<label class="col-md-3 control-label">行政职务:</label>
					<div class="col-md-3">
						<input type="text" id="userzj_postcode" name="userzj_postcode"
							class="form-control" value="${user.userzj_postcode}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">通讯地址:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_messageaddr"
							name="userzj_messageaddr" class="form-control"
							value="${user.userzj_messageaddr}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">单位:</label>
					<div class="col-md-9">
						<input type="text" class="form-control"
							value="${user.userzj_company}" id="userzj_company"
							name="userzj_company">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">最后学历及获取时间:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_education" name="userzj_education"
							class="form-control" value="${user.userzj_education}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">主要研究领域:</label>
					<div class="col-md-9">
						<input type="text" id="userzj_region" name="userzj_region"
							class="form-control" value="${user.userzj_region}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">主要工作经历:</label>
					<div class="col-md-9">
						<textarea id="userzj_experience" cols="30" rows="4" class="form-control" name="userzj_experience"
							onKeyUp="ControlWordCount(&quot;userzj_experience&quot;,&quot;experience_count&quot;,<%=StringFinal.sp_experience_length%>)">${user.userzj_experience}</textarea>
						<p style="float: right; margin-top: 5px">
							你还可以输入<span id="experience_count">${experience_count}</span>个字
						</p>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-3 control-label">主要研究成果:</label>
					<div class="col-md-9">
						<textarea id="userzj_result" cols="30" rows="4" class="form-control" name="userzj_result"
							onKeyUp="ControlWordCount(&quot;userzj_result&quot;,&quot;result_count&quot;,<%=StringFinal.sp_result_length%>)">${user.userzj_result}</textarea>
						<p style="float: right; margin-top: 5px">
							你还可以输入<span id="result_count">${result_count}</span>个字
						</p>
					</div>
				</div>
			</div>
			<center>
				<div class="form-group sepH_c">
					<div class="col-md-12">
						<button type="button" id="updateBtn" class="btn  btn-info"
							onclick="updateUser()">提交信息</button>
					</div>
				</div>
			</center>
		</div>
	</form>

	<input type="text" id="nation" hidden="true"
		value="${user.userzj_nation}">
	<input type="text" id="political" hidden="true"
		value="${user.userzj_political}">

	<div class="modal fade" id="mymodal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">图片上传</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal required-validate" action=""
						enctype="multipart/form-data" method="post">
						<div class="form-group">
							<div class="col-md-10 tl th" id="fileinput">
								<input type="file" name="image" id="fileimage"
									class="projectfile" />
								<p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过1.0M</p>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>